<template>
  <view class="aunt-mom-container">
    <!-- 状态栏占位符 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 返回主菜单按钮 -->
    <view class="back-button" @tap="goBack">
      <view class="back-button-inner">
        <text class="back-icon">↩</text>
        <text class="back-text">返回主菜单</text>
      </view>
      <view class="back-button-glow"></view>
    </view>
    
    <!-- 头部标题 -->
    <view class="title-header">
      <text class="title">壹妈助手</text>
      <text class="subtitle">宝宝健康成长的贴心伴侣</text>
    </view>
    
    <!-- 宝宝信息卡片 -->
    <view class="baby-card">
      <view class="baby-profile">
        <image class="baby-avatar" src="/static/baby-avatar.png" mode="aspectFill"></image>
        <view class="baby-info">
          <view class="baby-name-area">
            <text class="baby-name">{{ babyInfo.name || '添加宝宝' }}</text>
            <text v-if="babyInfo.name" class="baby-gender" :class="babyInfo.gender === '男' ? 'male' : 'female'">
              {{ babyInfo.gender === '男' ? '♂' : '♀' }}
            </text>
          </view>
          <text v-if="babyInfo.dob" class="baby-age">{{ ageDescription }}</text>
          <text v-else class="add-baby-tip" @tap="navigateTo('/auntMom/pages/babyInfo/babyInfo')">点击添加宝宝信息</text>
        </view>
      </view>
      <view class="baby-stats" v-if="babyInfo.name">
        <view class="stat-item">
          <text class="stat-value">{{ babyInfo.weight || '--' }}</text>
          <text class="stat-label">体重(kg)</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ babyInfo.height || '--' }}</text>
          <text class="stat-label">身高(cm)</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ babyInfo.head || '--' }}</text>
          <text class="stat-label">头围(cm)</text>
        </view>
      </view>
    </view>
    
    <!-- 提醒区域 - 置顶显示 -->
    <view class="reminders">
      <view class="section-header">
        <text class="section-title">近期提醒</text>
      </view>
      
      <view v-if="reminders.length > 0" class="reminder-list">
        <view 
          class="reminder-item" 
          v-for="(reminder, index) in reminders" 
          :key="index"
        >
          <view class="reminder-icon" :class="reminder.type">
            <text class="icon">{{ reminderIcons[reminder.type] }}</text>
          </view>
          <view class="reminder-content">
            <text class="reminder-title">{{ reminder.title }}</text>
            <text class="reminder-date">{{ formatDate(reminder.date) }}</text>
          </view>
          <view class="reminder-status" :class="reminder.status">
            <text>{{ reminderStatus[reminder.status] }}</text>
          </view>
        </view>
      </view>
      
      <view v-else class="empty-reminder">
        <text class="empty-text">暂无近期提醒</text>
      </view>
    </view>
    
    <!-- 功能区域 -->
    <view class="features-grid">
      <view class="feature-item" @tap="navigateTo('/auntMom/pages/growth/growth')">
        <view class="feature-icon growth-icon">📈</view>
        <text class="feature-name">成长记录</text>
      </view>
      <view class="feature-item" @tap="navigateTo('/auntMom/pages/vaccine/vaccine')">
        <view class="feature-icon vaccine-icon">💉</view>
        <text class="feature-name">疫苗接种</text>
      </view>
      <view class="feature-item" @tap="navigateTo('/auntMom/pages/diet/diet')">
        <view class="feature-icon diet-icon">🍼</view>
        <text class="feature-name">饮食建议</text>
      </view>
      <view class="feature-item" @tap="navigateTo('/auntMom/pages/babyInfo/babyInfo')">
        <view class="feature-icon info-icon">📋</view>
        <text class="feature-name">宝宝信息</text>
      </view>
    </view>
    
    <!-- 成长记录展示 -->
    <view class="growth-record">
      <view class="section-header">
        <text class="section-title">最近成长记录</text>
        <text class="section-more" @tap="navigateTo('/auntMom/pages/growth/growth')">查看更多</text>
      </view>
      
      <view v-if="growthRecords.length > 0" class="record-list">
        <view 
          class="record-item" 
          v-for="(record, index) in growthRecords" 
          :key="index"
          @tap="viewRecordDetail(record)"
        >
          <view class="record-date">
            <text class="record-day">{{ formatDay(record.date) }}</text>
            <text class="record-month">{{ formatMonth(record.date) }}</text>
          </view>
          <view class="record-content">
            <text class="record-title">{{ record.title }}</text>
            <text class="record-desc">{{ record.description }}</text>
            <view class="record-stats">
              <text class="record-stat">身高: {{ record.height }}cm</text>
              <text class="record-stat">体重: {{ record.weight }}kg</text>
            </view>
          </view>
          <text class="record-arrow">→</text>
        </view>
      </view>
      
      <view v-else class="empty-record">
        <text class="empty-text">暂无成长记录</text>
        <button class="add-record-btn" @tap="navigateTo('/auntMom/pages/growth/growth')">添加记录</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 获取状态栏高度
const statusBarHeight = ref(20);

// 宝宝信息
const babyInfo = ref({
  name: '',
  gender: '',
  dob: '',
  weight: '',
  height: '',
  head: ''
});

// 成长记录
const growthRecords = ref([]);

// 提醒列表
const reminders = ref([]);

// 提醒图标映射
const reminderIcons = {
  vaccine: '💉',
  checkup: '🏥',
  diet: '🍼',
  other: '📅'
};

// 提醒状态映射
const reminderStatus = {
  pending: '待办',
  completed: '已完成',
  overdue: '已过期'
};

// 计算宝宝年龄描述
const ageDescription = computed(() => {
  if (!babyInfo.value.dob) return '';
  
  const birthDate = new Date(babyInfo.value.dob);
  const today = new Date();
  
  const yearDiff = today.getFullYear() - birthDate.getFullYear();
  const monthDiff = today.getMonth() - birthDate.getMonth();
  const dayDiff = today.getDate() - birthDate.getDate();
  
  let years = yearDiff;
  let months = monthDiff;
  
  if (dayDiff < 0) {
    months--;
  }
  
  if (months < 0) {
    years--;
    months += 12;
  }
  
  if (years > 0) {
    return `${years}岁${months}个月`;
  } else {
    return `${months}个月`;
  }
});

// 格式化日期函数
const formatDay = (dateStr) => {
  const date = new Date(dateStr);
  return date.getDate();
};

const formatMonth = (dateStr) => {
  const date = new Date(dateStr);
  return `${date.getMonth() + 1}月`;
};

const formatDate = (dateStr) => {
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
};

// 导航函数
const navigateTo = (url) => {
  uni.navigateTo({
    url,
    fail: (err) => {
      console.error('导航失败:', err);
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      });
    }
  });
};

// 返回函数
const goBack = () => {
  uni.navigateBack({
    fail: () => {
      uni.switchTab({
        url: '/pages/dashboard/dashboard'
      });
    }
  });
};

// 查看记录详情
const viewRecordDetail = (record) => {
  uni.setStorageSync('currentGrowthRecord', record);
  navigateTo('/auntMom/pages/growth/growth?mode=view&id=' + record.id);
};

// 加载数据
const loadData = () => {
  // 模拟获取宝宝信息
  const storedBabyInfo = uni.getStorageSync('babyInfo');
  if (storedBabyInfo) {
    babyInfo.value = JSON.parse(storedBabyInfo);
  }
  
  // 模拟获取成长记录
  const storedGrowthRecords = uni.getStorageSync('growthRecords');
  if (storedGrowthRecords) {
    growthRecords.value = JSON.parse(storedGrowthRecords);
  }
  
  // 模拟获取提醒
  const storedReminders = uni.getStorageSync('reminders');
  if (storedReminders) {
    reminders.value = JSON.parse(storedReminders);
  } else {
    // 示例数据
    if (babyInfo.value.name) {
      reminders.value = [
        {
          type: 'vaccine',
          title: '接种疫苗: 麻疹疫苗',
          date: '2023-06-20',
          status: 'pending'
        },
        {
          type: 'checkup',
          title: '体检: 6个月常规体检',
          date: '2023-06-25',
          status: 'pending'
        }
      ];
      uni.setStorageSync('reminders', JSON.stringify(reminders.value));
    }
  }
};

// 页面加载
onMounted(() => {
  // 获取状态栏高度
  uni.getSystemInfo({
    success: (res) => {
      statusBarHeight.value = res.statusBarHeight;
    }
  });
  
  // 加载数据
  loadData();
});
</script>

<style lang="scss" scoped>
.aunt-mom-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #e8f0ff 0%, #f0f7ff 50%, #f5faff 100%);
  padding: 20rpx 24rpx;
  padding-bottom: 30rpx;
  padding-top: 80upx;
  position: relative;
}

.status-bar {
  width: 100%;
  background-color: transparent;
}

.back-button {
  position: fixed;
  top: 60rpx;
  left: 24rpx;
  z-index: 100;
  transition: all 0.3s;
  
  .back-button-inner {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #007aff 0%, #36a0ff 100%);
    color: #fff;
    padding: 12rpx 24rpx;
    border-radius: 40rpx;
    box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.3);
    transition: all 0.3s;
    
    &:active {
      transform: scale(0.96);
      box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.2);
    }
  }
  
  .back-icon {
    font-size: 32rpx;
    margin-right: 6rpx;
  }
  
  .back-text {
    font-size: 24rpx;
    font-weight: 500;
  }
  
  .back-button-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #007aff 0%, #36a0ff 100%);
    border-radius: 40rpx;
    opacity: 0.4;
    filter: blur(20rpx);
    z-index: -1;
    transform: scale(0.8);
  }
}

.title-header {
  text-align: center;
  margin: 20rpx 0 24rpx;
  
  .title {
    font-size: 38rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 4rpx;
  }
  
  .subtitle {
    font-size: 24rpx;
    color: #666;
  }
}

.baby-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .baby-profile {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .baby-avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      background-color: #f0f0f0;
      margin-right: 20rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }
    
    .baby-info {
      flex: 1;
      
      .baby-name-area {
        display: flex;
        align-items: center;
        margin-bottom: 6rpx;
        
        .baby-name {
          font-size: 34rpx;
          font-weight: bold;
          color: #333;
          margin-right: 10rpx;
        }
        
        .baby-gender {
          width: 36rpx;
          height: 36rpx;
          border-radius: 18rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          
          &.male {
            background-color: #e6f7ff;
            color: #007aff;
          }
          
          &.female {
            background-color: #fff0f6;
            color: #eb2f96;
          }
        }
      }
      
      .baby-age {
        font-size: 24rpx;
        color: #666;
      }
      
      .add-baby-tip {
        font-size: 24rpx;
        color: #007aff;
      }
    }
  }
  
  .baby-stats {
    display: flex;
    justify-content: space-around;
    border-top: 2rpx solid #f0f0f0;
    padding-top: 16rpx;
    
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .stat-value {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 4rpx;
      }
      
      .stat-label {
        font-size: 20rpx;
        color: #999;
      }
    }
  }
}

.features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  justify-content: space-between;
  margin-bottom: 20rpx;
  
  .feature-item {
    width: calc(45% - 8rpx);
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx 16rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    
    .feature-icon {
      width: 70rpx;
      height: 70rpx;
      border-radius: 14rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
      font-size: 36rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      
      &.growth-icon {
        background: linear-gradient(135deg, #1890ff 0%, #36adff 100%);
        color: #fff;
      }
      
      &.vaccine-icon {
        background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
        color: #fff;
      }
      
      &.diet-icon {
        background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
        color: #fff;
      }
      
      &.info-icon {
        background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
        color: #fff;
      }
    }
    
    .feature-name {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 16rpx;
  
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
  }
  
  .section-more {
    font-size: 24rpx;
    color: #007aff;
  }
}

.growth-record {
  margin-bottom: 20rpx;
  
  .record-list {
    margin: 0;
  }
  
  .record-item {
    background-color: #fff;
    border-radius: 14rpx;
    padding: 16rpx;
    display: flex;
    margin-bottom: 16rpx;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    &:active {
      background-color: #f9f9f9;
    }
    
    .record-date {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 70rpx;
      margin-right: 16rpx;
      
      .record-day {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .record-month {
        font-size: 20rpx;
        color: #999;
      }
    }
    
    .record-content {
      flex: 1;
      
      .record-title {
        font-size: 26rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 4rpx;
      }
      
      .record-desc {
        font-size: 22rpx;
        color: #666;
        margin-bottom: 8rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .record-stats {
        display: flex;
        gap: 12rpx;
        
        .record-stat {
          font-size: 20rpx;
          color: #999;
          background-color: #f5f5f5;
          padding: 2rpx 10rpx;
          border-radius: 6rpx;
        }
      }
    }
    
    .record-arrow {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 24rpx;
    }
  }
  
  .empty-record {
    text-align: center;
    background-color: #fff;
    border-radius: 14rpx;
    padding: 30rpx 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .empty-text {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 16rpx;
      display: block;
    }
    
    .add-record-btn {
      background: linear-gradient(135deg, #007aff 0%, #36a0ff 100%);
      color: #fff;
      font-size: 24rpx;
      width: 180rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
    }
  }
}

.reminders {
  margin-bottom: 20rpx;
  
  .reminder-list {
    margin: 0;
  }
  
  .reminder-item {
    background-color: #fff;
    border-radius: 14rpx;
    padding: 16rpx;
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .reminder-icon {
      width: 70rpx;
      height: 70rpx;
      border-radius: 14rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
      font-size: 32rpx;
      
      &.vaccine {
        background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
        color: #fff;
      }
      
      &.checkup {
        background: linear-gradient(135deg, #1890ff 0%, #36adff 100%);
        color: #fff;
      }
      
      &.diet {
        background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
        color: #fff;
      }
      
      &.other {
        background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
        color: #fff;
      }
    }
    
    .reminder-content {
      flex: 1;
      
      .reminder-title {
        font-size: 26rpx;
        color: #333;
        margin-bottom: 4rpx;
      }
      
      .reminder-date {
        font-size: 22rpx;
        color: #999;
      }
    }
    
    .reminder-status {
      font-size: 22rpx;
      padding: 2rpx 12rpx;
      border-radius: 6rpx;
      
      &.pending {
        background-color: #e6f7ff;
        color: #007aff;
      }
      
      &.completed {
        background-color: #f6ffed;
        color: #52c41a;
      }
      
      &.overdue {
        background-color: #fff1f0;
        color: #f5222d;
      }
    }
  }
  
  .empty-reminder {
    text-align: center;
    background-color: #fff;
    border-radius: 14rpx;
    padding: 30rpx 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .empty-text {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style> 